<script setup lang="ts">
import {onMounted, ref} from 'vue'
// 定义数组遍历渲染动画元素
const animateArr = ref([
    {
        img: '/src/assets/交通安全画像系统_nor.png',
        text: '交通安全画像系统',
        img_hov: '/src/assets/交通安全画像系统_hov.png',
    },
    {
        img: '/src/assets/交通态势监控系统_nor.png',
        text: '交通态势监控系统',
        img_hov: '/src/assets/交通态势监控系统_hov.png',
    },
    {
        img: '/src/assets/可视化作战平台_nor.png',
        text: '可视化作战平台',
        img_hov: '/src/assets/可视化作战平台_hov.png',
    },
    {
        img: '/src/assets/重点车辆监管系统_nor.png',
        text: '重点车辆监管系统',
        img_hov: '/src/assets/重点车辆监管系统_hov.png',
    },
    {
        img: '/src/assets/支队平台系统本地化应用_nor.png',
        text: '支队平台系统本地化应用',
        img_hov: '/src/assets/支队平台系统本地化应用_hov.png',
    },
    {
        img: '/src/assets/非机动车未带头盔识别系统_nor.png',
        text: '非机动车未带头盔识别系统',
        img_hov: '/src/assets/非机动车未带头盔识别系统_hov.png',
    }
])
// 定义数据准备获取动画元素
const animate = ref<HTMLDivElement>()
// 动态设置延迟时间
onMounted(() => {
    for (let a = 0; a < animate.value!.children.length; a++) {
        (animate.value!.children[a] as HTMLDivElement).style.animationDelay = `
            ${-7.5-5 * a}s,
            ${-5 * a}s,
            ${-5 * a}s
        `
    }
})
//鼠标移入事件
const mouseenter = (index: number) => {
    //动画停止
    for (let a = 0; a < animate.value!.children.length; a++) {
        (animate.value!.children[a] as HTMLDivElement).style.animationPlayState = 'paused'
    }
    //切换图片
    let tmp = animateArr.value[index].img
    animateArr.value[index].img = animateArr.value[index].img_hov
    animateArr.value[index].img_hov = tmp
}
// 鼠标移出事件
const mouseleave = (item: { img: any; img_hov: any }) => {
    console.log(animateArr.value);
    // 交换图片
    let tmp = item.img
    item.img = item.img_hov
    item.img_hov = tmp
    // 开启动画
    for (let a = 0; a < animate.value!.children.length; a++) {
        (animate.value!.children[a] as HTMLDivElement).style.animationPlayState = ''
    }
}
</script>

<template>
    <div class="animate" ref="animate">
        <!-- 遍历显示动画元素 -->
        <div @mouseenter="mouseenter(index)"  @mouseleave="mouseleave(item)" class="animate-item" v-for="(item, index) in animateArr" :key="item.text">
            <img :src="item.img" alt="">
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    // 定义动画
    @keyframes animateX{
        0%{
            left: 0;
        }
        100%{
            left: calc(100% - 200px);
        }
    }
    @keyframes animateY{
        0%{
            top: 0;
        }
        100%{
            top: calc(100% - 200px);
        }
    }
    @keyframes scale{
        0%{
            transform: scale(0.5);
        }
        50%{
            transform: scale(1);
        }
        100%{
            transform: scale(0.5);
        }
    }
    .animate{
        position: absolute;
        top: 100px;
        left: 0;
        width: 125%;
        height: 50%;
        transform: translateX(-10%);
        .animate-item{
            width: 200px;
            height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
            animation-name: animateX,animateY,scale;
            animation-duration: 15s,15s,30s;
            animation-timing-function: cubic-bezier(.36,0,.64,1);
            animation-iteration-count: infinite;
            animation-direction: alternate;
            p{
                color: #fff;
                padding: 0;
                margin: 0;
            }
        }
        
    }
</style>